<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :background="bg"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    :layout="layout"
    :total="total"
  >
  </el-pagination>
</template>

<script>
export default {
  props: {
    total: {
      //总条目数
      type: Number,
      default: 0,
    },
    bg: {
      //是否显示背景颜色
      type: Boolean,
      default: false,
    },
    pageSizes: {
      //每页显示个数选择器的选项设置
      type: Array,
      default:()=>[10, 20, 30],
    },
    pageSize: {
      //每页显示条数
      type: Number,
      default: 10,
    },
    currentPage: {
      //当前页数
      type: Number,
      default: 1,
    },
    layout:{
        type:String,
        default:'total, sizes, prev, pager, next, jumper'
    }
  },
  methods: {
    // pageSize 改变时会触发
    handleSizeChange(pageSize) {
      this.$emit('size-change',pageSize)
    },
    //currentPage 改变时会触发
    handleCurrentChange(page) {
       this.$emit("current-change",page)
      }
  },
};
</script>

<style>
</style>